<template>
  <!--分析页面
所有图片组件都放在该页面中.可以通过URL查询参数来触发不同范围的查询,
比如分析某个特定空间(spaceId=xxxx),分析公共图库(queryPublic=1),分析全部空间(queryAll=1).
这样无论是管理员分析全空间/公共图库,还是用户分析某个空间,都可以复用该页面-->
  <div id="spaceAnalyzePage">
    <h2>
      空间图库分析 -
      <span v-if="queryAll"> 全部空间 </span>
      <span v-else-if="queryPublic"> 公共图库 </span>
      <span v-else>
        <a :href="`/space/${spaceId}`" target="_blank">id：{{ spaceId }}</a>
      </span>
    </h2>
    <a-row :gutter="[16, 16]">
      <!-- 空间使用分析 -->
      <a-col :xs="24" :md="12">
        <SpaceUsageAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 空间分类分析 -->
      <a-col :xs="24" :md="12">
        <SpaceCategoryAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 标签分析 -->
      <a-col :xs="24" :md="12">
        <SpaceTagAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 图片大小分段分析 -->
      <a-col :xs="24" :md="12">
        <SpaceSizeAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 用户上传行为分析 -->
      <a-col :xs="24" :md="12">
        <SpaceUserAnalyze :spaceId="spaceId" :queryAll="queryAll" :queryPublic="queryPublic" />
      </a-col>
      <!-- 空间使用排行分析 -->
      <a-col :xs="24" :md="12">
        <SpaceRankAnalyze
          v-if="isAdmin"
          :spaceId="spaceId"
          :queryAll="queryAll"
          :queryPublic="queryPublic"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import SpaceUsageAnalyze from '@/components/analyze/SpaceUsageAnalyze.vue'
import SpaceCategoryAnalyze from '@/components/analyze/SpaceCategoryAnalyze.vue'
import SpaceTagAnalyze from '@/components/analyze/SpaceTagAnalyze.vue'
import SpaceSizeAnalyze from '@/components/analyze/SpaceSizeAnalyze.vue'
import SpaceUserAnalyze from '@/components/analyze/SpaceUserAnalyze.vue'
import SpaceRankAnalyze from '@/components/analyze/SpaceRankAnalyze.vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'

const route = useRoute()

// 空间 id
const spaceId = computed(() => {
  return route.query?.spaceId as string
})

// 计算属性：是否查询所有空间
const queryAll = computed(() => {
  // 使用 !! 将 route.query?.queryAll 的值转换为布尔值。
  // 这里考虑了几种情况：
  // - 如果 route.query.queryAll 存在且其值为真值（例如 'true', '1'），则返回 true。
  // - 如果 route.query.queryAll 不存在、为空字符串、null 或 undefined，则返回 false。
  // !! 操作首先将值转换为布尔值并取反（第一个 !），然后再次取反（第二个 !）以得到原始值的布尔表示。
  return !!route.query?.queryAll
})

// 计算属性：是否查询公共空间
const queryPublic = computed(() => {
  // 类似地，使用 !! 将 route.query?.queryPublic 的值转换为布尔值。
  // 目的是确保无论 URL 参数中提供的值是什么类型或形式，
  // 最终都能得到一个明确的布尔结果，便于后续逻辑判断。
  // 例如，如果 URL 参数中 queryPublic 的值是 'false' 或 ''（空字符串），
  // 它们都会被转换成 false；如果是 'true' 或 '1'，则会被转换成 true。
  return !!route.query?.queryPublic
})

const loginUserStore = useLoginUserStore()
const loginUser = loginUserStore.loginUser

const isAdmin = computed(() => {
  return loginUser.userRole === 'admin'
})
</script>

<style scoped>
/* Your styles here */
</style>
